<template>
  <div class="container">
    <div class="input-box">
      <input type="text" v-model.trim="requestOptions.title" @keyup.enter="search" @confirm="search">
      <u-icon name="search" class="icon" color="#888" @click="search" size="36"></u-icon>
    </div>
    <div class="goods-list">
      <div class="goods" v-for="(item,index) in list" :key="index">
        <u-image :lazy-load="true" mode="widthFix" class="thumb" :src="item.logoUrl"></u-image>
        <div class="goods-name">{{item.title}}</div>
        <div class="price-box">
          <div class="price">&yen;{{item.price | formatPrice}}</div>
          <div class="sold-num">{{item.soldNum}}人付款</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import uImage from 'uview-ui/components/u-image/u-image'
import sign from '@/utils/sign'
import { dewuHeader, getDewuQueryStr } from '@/utils/dewu'
export default {
  components: { uImage },
  data() {
    return {
      list: [],
      requestOptions: {
        title: 'aj1',
        pageSize: 20,
        pageNum: 0,
      },
      finished: false
    }
  },
  onLoad() {
    this.getList()
  },
  methods: {
    search() {
      if(!this.requestOptions.title) return;
      this.finished = false;
      this.list = [];
      this.$set(this.requestOptions, 'pageNum', 0);
      this.getList();
    },
    getList() {
      if (this.finished) return;
      uni.showLoading();
      /* this.$http.get('/dewu/search', this.requestOptions).then(res => {
        console.log(res);
        if (res.productList.length < this.requestOptions.pageSize) {
          this.finished = true
        }
        this.list = this.list.concat(res.productList);
        uni.hideLoading();
      }).catch(err => {
        uni.hideLoading();
      }) */
      const queryStr = getDewuQueryStr({
        title: this.requestOptions.title || 'aj1',
        page: this.requestOptions.pageNum,
        limit: this.requestOptions.pageSize,
        showHot: -1,
        sortType: 1,
        sortMode: 1,
        unionId: '',
      });
      uni.request({
        url: `https://app.poizon.com/api/v1/h5/search/fire/search/list?${queryStr}`,
        header: dewuHeader,
        success: (res) => {
          res = res.data.data;
          if (res.productList.length < this.requestOptions.pageSize) {
            this.finished = true
          }
          this.list = this.list.concat(res.productList);
          uni.hideLoading()
        }
      })
    }
  },
  filters: {
    formatPrice(value) {
      return Math.round(value / 100)
    }
  },
  onReachBottom() {
    this.$set(this.requestOptions, 'pageNum', this.requestOptions.pageNum + 1);
    this.getList();
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 32rpx;
  padding-top: 112rpx;
  .input-box {
    top: 0;
    // position: fixed;
    height: 80rpx;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9;
    padding: 32rpx;
    background-color: #fff;
    input {
      border-radius: 16rpx;
      border: 2rpx solid #e1e1ee;
      height: 80rpx;
      padding: 0 24rpx;
    }
    .icon {
      position: absolute;
      right: 56rpx;
      top: 56rpx;
    }
  }
  .goods-list {
    margin-top: 24rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 36rpx;
    column-gap: 24rpx;
    .goods {
      // background-color: #333;
      border-radius: 24rpx;
      min-height: 360rpx;
      .thumb {
        height: 280rpx;
        min-height: 280rpx;
        width: 100%;
      }
      &-name {
        margin-top: 24rpx;
        color: #666;
        font-size: 28rpx;
        text-align: left;
      }
      .price-box {
        color: #000000;
        margin-top: 16rpx;
        display: flex;
        justify-content: space-between;
        .price {
          font-size: 28rpx;
        }
        .sold-num {
          font-size: 26rpx;
          color: #888;
        }
      }
    }
  }
}
</style>
